<template>
	<el-container>
		<el-aside width="300px" v-loading="menuloading">
			<el-container>
				<el-header>
					<el-input placeholder="输入关键字进行过滤" v-model="menuFilterText" clearable></el-input>
				</el-header>
				<el-main class="nopadding">
					<el-tree ref="menu" class="menu" node-key="id" :data="menuList" :props="menuProps" draggable
							 highlight-current :expand-on-click-node="false" check-strictly show-checkbox
							 :default-expanded-keys="expandMenuList" @node-expand="nodeExpand" @node-collapse="nodeCollapse"
							 :filter-node-method="menuFilterNode" @node-click="menuClick" @node-drop="nodeDrop">

						<template #default="{node, data}">
							<span class="custom-tree-node el-tree-node__label">
								<span class="label">
									{{ node.label }}
									<el-icon color="rgb(121, 187, 255)" style="margin-left: 5px;" v-if="data.type === 0"><el-icon-wallet /></el-icon>
									<el-icon color="rgb(238, 190, 119)" style="margin-left: 5px;" v-if="data.type === 1"><el-icon-tickets /></el-icon>
									<el-icon color="rgb(200, 201, 204)" style="margin-left: 5px;" v-if="data.type === 2"><el-icon-tools /></el-icon>
									<template v-if="data.is_show === 0"><el-tag style="margin-left: 5px;" type="warning">隐藏</el-tag></template>
								</span>
								<span class="do" v-if="data.type !== 2">
									<el-icon @click.stop="add(node, data)"><el-icon-plus /></el-icon>

								</span>
							</span>
						</template>

					</el-tree>
				</el-main>
				<el-footer style="height:51px;">
					<el-button type="primary" size="small" icon="el-icon-plus" @click="add()"></el-button>
					<el-button type="primary" plain size="small" icon="el-icon-refresh" @click="refresh()"></el-button>
					<el-button type="danger" size="small" plain icon="el-icon-delete" @click="delMenu"></el-button>
				</el-footer>
			</el-container>
		</el-aside>
		<el-container>
			<el-main class="nopadding" style="padding:20px;" ref="main">
				<save ref="save" :menu="saveMenuList"></save>
			</el-main>
		</el-container>
	</el-container>
</template>

<script>
	import save from './save.vue'
  import api from '@/api/index.js'
  import tool from '@/utils/tool.js'

	export default {
		name: "settingMenu",
		components: {
			save
		},
		data(){
			return {
				menuloading: false,
				menuList: [],
				saveMenuList: [],
				expandMenuList: [],
				menuProps: {
					label: (data)=>{
						return data.name
					}
				},
				menuFilterText: ""
			}
		},
		watch: {
			menuFilterText(val){
				this.$refs.menu.filter(val);
			}
		},
		mounted() {
			this.getMenu();
		},
		methods: {
			//加载树数据
			async getMenu(){
				this.menuloading = true
				var res = await api.system.menu.list()
				const routes = res.data.map(e => {
					return {
						id: e.id,
						parent_id: e.parent_id,
						router: tool.revisePath(e.router || String(e.id)),
						view_path: e.view_path,
						type: e.type,
						name: e.name,
						icon: e.icon,
						sort: e.sort,
						perms: e.perms.split(',').map(p => { return {text:p} }),
						is_show: tool.isEmpty(e.is_show) ? true : e.is_show,
						children: []
					};
				})
				this.menuList = tool.deepTree(routes,'parent_id');
				// 编辑的时候上级菜单不需要按钮一级
				this.saveMenuList = tool.deepTree(res.data.filter(e => e.type !== 2).map(e => {
					return {
						id: e.id,
						parent_id: e.parent_id,
						name: e.name,
						children: []
					};
				}),'parent_id')
				this.menuloading = false
			},
			//树点击
			menuClick(data, node){
				var pid = node.level==1?undefined:node.parent.data.id;
				this.$refs.save.setData(data, pid)
				this.$refs.main.$el.scrollTop = 0
			},
			//树过滤
			menuFilterNode(value, data){
				if (!value) return true;
				var targetText = data.name;
				return targetText.indexOf(value) !== -1;
			},
			//树拖拽
			nodeDrop(draggingNode, dropNode, dropType){
				this.$refs.save.setData({})
				this.$message(`拖拽对象：${draggingNode.data.name}, 释放对象：${dropNode.data.name}, 释放对象的位置：${dropType}`)
				console.log(`拖拽对象：${draggingNode.data.name}, 释放对象：${dropNode.data.name}, 释放对象的位置：${dropType}`)
			},
			//增加
			async add(node, data){
				console.log(data)
				let pid = node ? node.data.id : ""
				let newType = (data?.type || -1) + 1;
				if (newType > 2) {
					newType = 2;
				}
				this.$refs.main.$el.scrollTop = 0;
				this.$refs.save.setData({
						id:0,
						is_show:1,
						type:newType,
					},
					pid)
			},
			async refresh() {
				this.getMenu()
			},
			//删除菜单
			async delMenu(){
				var CheckedNodes = this.$refs.menu.getCheckedNodes()
				if(CheckedNodes.length === 0){
					this.$message.warning("请选择需要删除的项")
					return false;
				}

				var confirm = await this.$confirm('确认删除已选择的菜单吗？','提示', {
					type: 'warning',
					confirmButtonText: '删除',
					confirmButtonClass: 'el-button--danger'
				}).catch(() => {})
				if(confirm !== 'confirm'){
					return false
				}

				this.menuloading = true
				var reqData = {
					ids: CheckedNodes.map(item => item.id)
				}
				let res = await api.system.menu.delete(reqData);
				this.menuloading = false

				if(res.code === 0){
					CheckedNodes.forEach(item => {
						let node = this.$refs.menu.getNode(item)
						if(node.isCurrent){
							this.$refs.save.setData({})
						}
						this.$refs.menu.remove(item)
					})
				}else{
					this.$message.warning(res.message)
				}
			},
			nodeExpand(data) {
				this.expandMenuList.push(data.id);
			},
			nodeCollapse(data) {
				this.expandMenuList = this.expandMenuList.filter(item => {
					return item !== data.id
				})
			},
		}
	}
</script>

<style scoped>
	.custom-tree-node {display: flex;flex: 1;align-items: center;justify-content: space-between;font-size: 14px;padding-right: 24px;height:100%;}
	.custom-tree-node .label {display: flex;align-items: center;;height: 100%;}
	.custom-tree-node .label .el-tag {margin-left: 5px;}
	.custom-tree-node .do {display: none;}
	.custom-tree-node .do i {margin-left:5px;color: #999;}
	.custom-tree-node .do i:hover {color: #333;}

	.custom-tree-node:hover .do {display: inline-block;}
</style>
